<template>
  <el-drawer
    v-model="drawerVisible"
    :append-to-body="true"
    :modal="false"
    :size="drawerProps.showTemplate ? '800px' : '600px'"
    title="高级筛选"
  >
    <div class="flx h-100">
      <div class="template-list" v-if="drawerProps.showTemplate" v-loading="templateLoading">
        <div
          class="template-item"
          v-for="(item, index) in templateList"
          :key="index"
          :class="{ active: currentTemplateIndex == index }"
          @click="clickTemplate(index)"
        >
          <div class="name sle">{{ item.name }}</div>
          <div class="del text-red" @click="templateDel(item)">删除</div>
        </div>
      </div>

      <div class="flx-1">
        <div class="p-title mb-10">筛选信息</div>
        <el-form label-position="top" require-asterisk-position="right" :inline="true" class="form-inline-wrap">
          <el-form-item label="客户级别">
            <el-select v-model="params.level" multiple placeholder="请选择客户级别" clearable>
              <el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户状态">
            <el-select v-model="params.status" multiple placeholder="请选择客户状态" clearable>
              <el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select v-model="params.type" multiple placeholder="请选择客业务类型" clearable>
              <el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-input v-model="params.source" placeholder="请输入客户来源" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户行业">
            <el-select v-model="params.customerIndustries" multiple placeholder="请选择客户行业(模糊搜索)" clearable>
              <el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-input v-model="params.source" placeholder="请输入客户来源（模糊检索）" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户行业">
            <el-input v-model="params.industry" placeholder="请输入客户行业（模糊检索）" clearable></el-input>
          </el-form-item>
          <el-form-item label="所在地">
            <el-input v-model="params.location" placeholder="请输入客户所在地（模糊检索）" clearable></el-input>
          </el-form-item>
          <el-form-item label="领取时间" class="w-100">
            <div class="flx-justify-between w-100">
              <el-date-picker
                v-model="params.times"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                ref="timePick"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="(collectionTimeShortcut = -1), (collectionTime = '')"
              >
              </el-date-picker>
              <div class="shortcut flx-justify-end ml-20">
                <div
                  class="item"
                  v-for="(item, index) in shortcutList"
                  :key="index"
                  :class="{ active: collectionTimeShortcut == index }"
                  @click="collectionTimeShortcutChange(index)"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="跟进时间" class="w-100">
            <div class="flx-justify-between w-100">
              <el-date-picker
                v-model="params!.followTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="(followTimeShortcut = -1), (followTime = '')"
              >
              </el-date-picker>
              <div class="shortcut flx-justify-end ml-20">
                <div
                  class="item"
                  v-for="(item, index) in shortcutList"
                  :key="index"
                  :class="{ active: followTimeShortcut == index }"
                  @click="followTimeShortcutChagne(index)"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </el-form-item>
          <div class="p-title mb-10 w-100">保存为筛选模板</div>
          <el-form-item label="模板名称" class="w-100">
            <el-input v-model="params.templateName" placeholder="请输入模板名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, defineEmits } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import { getFilteringTemplateList, delFilteringTemplate } from "@/api/modules/myClient";

const emit = defineEmits(["search"]);

interface DrawerProps {
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({});
const params = ref({});

// 业务类型
const businessType = ref([
  { label: "111", value: 1 },
  { label: "222", value: 2 }
]);

// 快捷选择日期
const shortcutList = ["今日", "昨日", "本周", "本月"];
// 领取时间快捷选择
const collectionTime = ref("");
const collectionTimeShortcut = ref(0);
const collectionTimeShortcutChange = index => {
  collectionTimeShortcut.value = index;
  params.value.times = "";
};
// 跟进时间快捷选择
const followTime = ref("");
const followTimeShortcut = ref(0);
const followTimeShortcutChagne = index => {
  followTimeShortcut.value = index;
};

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  console.log(params, drawerProps.value);
  drawerVisible.value = true;
};

const close = () => {
  drawerVisible.value = false;
};
const handleSubmit = () => {
  console.log(params.value);
  close();
  emit("search", params.value);
};

// 重置
const reset = () => {
  params.value = {};
  collectionTimeShortcut.value = 0;
  followTimeShortcut.value = 0;
};

// 模版列表
const currentTemplateIndex = ref(0);
const templateList = ref([
  { id: 1, name: "成单客户" },
  { id: 1, name: "跟进中客户" }
]);
const templateLoading = ref(false);
const getTemplateList = async () => {
  templateLoading.value = true;
  let res = await getFilteringTemplateList({});
  templateLoading.value = false;
  templateList.value = res.data;
};

const clickTemplate = index => {
  currentTemplateIndex.value = index;
};

// 删除模板
const templateDel = async data => {
  await useHandleData(delFilteringTemplate, { id: data.id }, `是否确定删除此模版`);
  getTemplateList();
};

defineExpose({
  acceptParams,
  reset
});
</script>

<style lang="scss" scoped>
.template-list {
  width: 180px;
  margin-right: 20px;
  box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.08);

  .template-item {
    line-height: 40px;
    padding: 0 16px 0 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 4px;
    margin-bottom: 8px;

    &:hover,
    &.active {
      background: rgba(31, 97, 243, 0.1);
      color: var(--el-color-primary);

      .del {
        display: inline-block;
      }
    }

    &:hover .del {
      display: inline-block;
    }

    .del {
      font-size: 12px;
      margin-left: 10px;
      display: none;
    }
  }
}
.shortcut {
  .item {
    margin-right: 4px;
    width: 36px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;

    &.active {
      color: #fff;
      background: var(--el-color-primary);
    }
  }
}
</style>
